Javascript is a Scripting Language that is initially used for Client Side in Web Development along with html.
JavaScript ("JS" for short) is a full-fledged dynamic programming language
It was invented by Brendan Eich (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation).
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the language
But now it can be used for almost all type of development work
Runtime basically means how we are going to run our Code in CPU.Which interpretors/SW used to Convert our code to Machine Code.
To Execute JavaScript Code, A Runtime is needed.
In case of Browsers there are inbuilt JS Engines that executes JS. Popular JS Engines are V8 in Chrome, Spider Monkey in Firefox etc..
Other than browsers there are Node and Deno that can be used as JS Runtime Environments.
Node is the most opular for now for Non browser JS Environment.
JS can be used to Validate Data given by Users before sending it server.
JS cannot access Users OS and File System.
The Above Code will prompt Hello World in the Browser.
The browser runs the HTML code Line wise in a Tree like Structure.
Document Object Model, or DOM for short, represents all page content as objects that can be modified.
The document object is the main “entry point” to the page. We can change or create anything on the page using it.
Parsing - means the DOM tree is being made in the Background.
Now once the Tree is being made after Parsing we need to Paint it in the Browser. This is called Rendering.
The Code in the Script Tag will Stop/Block the Rendering (running) of the Lines Below it. First all the commands in the Script tags will run then only we move to the next child.
<!DOCTYPE HTML>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1:1</td>
<td>2:1</td>
<td>3:1</td>
<td>4:1</td>
<td>5:1</td>
</tr>
<tr>
<td>1:2</td>
<td>2:2</td>
<td>3:2</td>
<td>4:2</td>
<td>5:2</td>
</tr>
<tr>
<td>1:3</td>
<td>2:3</td>
<td>3:3</td>
<td>4:3</td>
<td>5:3</td>
</tr>
<tr>
<td>1:4</td>
<td>2:4</td>
<td>3:4</td>
<td>4:4</td>
<td>5:4</td>
</tr>
<tr>
<td>1:5</td>
<td>2:5</td>
<td>3:5</td>
<td>4:5</td>
<td>5:5</td>
</tr>
</table>
<script>
let table = document.body.firstElementChild;
for (let i = 0; i < table.rows.length; i++) {
let row = table.rows[i];
row.cells[i].style.backgroundColor = 'red';
}
</script>
</body>
</html>
In Defer the HTML code will Parsed first without running Script(JS) file. and once the HTML code is parsed it'll execute the JS code.
In Async the HTML code will be parsed only till the time JS file is being Downloaded parallely means(JS needs its files to download first and then runs on the browser). and when the file is download it'll block the HTML and runs the Script.
In Normal Js the HTML code will be blocked , and first the Script file is executed after that it moves to HTML code
alert("2 plus 2 equals " + 2 + 2);
...JavaScript automatically converts the numbers to strings, and displays the message "2
plus 2 equals 22".
This is how we access element in Java Script
It means when the user Interacts with our Web Page some Actions takes place and the Actions that has been occured is known as Events.
Element(Action by User)--> Event (objects) --> Event listener Function (Calls that particular function)Inline event-handling means that you combine bits of JavaScript with HTML markup.
Here's a line that displays a link and then displays an alert when the user clicks it.
<a href="#" onClick="alert('Hi');">Click</a>
If we want function to run whenever the Button gets clicked
Event == button Event Listener == function fun()
Different ways to call Event Listener:
onclick
<button id='btn1' onclick="fun();fun2();fun3()">click 1</button>The Above function will be called only when the button (Action) gets Performed.
Second way
Third way
JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.¶JavaScript Identifiers are unique names.In JavaScript, identifiers are used to name variables , keywords, functions,labels).¶JavaScript variables are containers for storing data values. must have unique names¶
onblur = fun()
onfocus = fun()
GOTO JAVASCRIPT Event List
Get - we can see the data in the URL
Post - we can't see the data in the POST
We want data to be validated before sending unnecessarily to the SERVER, as server will be filled with Garbage.
The Above form will trigger its ONSUBMIT event and checl if the form VALIDATION is correct or NOT
If the segment exists, the method finds the index of the first character of the segment and assigns it to the variable firstChar. If the segment doesn't exist, the method assigns -1 to the variable, so you know it's not there.
Now we can replace the banned phrase with the preferred phrase with less coding.
change the character at a location.
The following code finds the last character in the string.
scoreAvg = Math.round(scoreAvg);
Array is the collection of similar type of data items stored at contiguous memory locations.
Arrays are lists of ordered, stored data. They can hold items that are of any data type. Arrays are created by using square brackets, with individual elements separated by commas.
arr.splice()
arr.concat(arr2)A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution.
Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.
The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body. However, they are limited and can’t be used in all situations.
There are several variations of arrow functions:
Arrow functions with a single parameter do not require () around the parameter list. Arrow functions with a single expression can use the concise function body which returns the result of the expression without the return keyword.
Limitations
Arrow functions do not have their own bindings to this or super, and should not be used as methods.
Arrow functions cannot be used as constructors.
Arrow functions cannot use yield, within its bodyCallback functions are functions that are passed as arguments in other functions. A callback function can then be invoked during the execution of that higher order function (that it is an argument of).
By Default array.sort() will sort stringwise
We use a helper function to sort heterogeneous or Numeric elements.
the helper function will return True(+ve) when a is greater but False(-ve) when smaller.
The above function will sort AGE wise
Map will store Values in a New Array hence we need to Catch new Values to a New Array. The callback function Must have return Statement to get values innside MAP.
The map() method creates a new array by performing a function on each element of the array.
The map() method does not execute the function for array elements without values.
The map() method does not change the original array.
json is a format which is udes to STORE multiple DATA of single ENTITY.
var person = { "name" : "rahul",
"age" : 23,
"marks" : 70
}
Use SQUARE NOTATION [ ].
The Above CODE will not work as our dot(.) notation will search for the value p which is not present in the json.
Hence we will use SQUARE method to access "age".
typeof() - only tells primitive ( int float array ..)type data types
for Non primitive returns Object.
instanceof() - operators tells us whether the object is the constructor of that class or not.
It always returns boolean values
The Left Hand Side (LHS) operand is the actual object being tested to the Right Hand Side (RHS) operand which is theactual constructor of a class.
spread operator uses tiple dots (...arr).
rest operator - if we dont know how many values we will get from the array to the function.
here **new** creates a blank JSON object for Student function.
If there is a function that is same for all the Objects we use a COMMON SHARED memory mechanism such that it'll not use uneccesary memory we use Prototype.
A callback is a function passed as an argument to another function
This technique allows a function to call another function
A callback function can run after another function has finished
A “producing code” that does something and takes time. For instance, some code that loads the data over a network. That’s a “singer”.
“consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
The promise object returned by the new Promise constructor has these internal properties:
state — initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is called.
result — initially undefined, then changes to value when resolve(value) called or error when reject(error) is called.
So the executor eventually moves promise to one of these states:
Promise
Objects are used to store keyed collections of various data and more complex entities.
An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.
== : checks whether the values are equal or not (it doesnt care about data types)
=== : it checks equality as well as type of the variable.
